<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问标签体</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $(".c1").click(function(){
                // 取值操作
                // html():识别标签,能够获取到标签体的所有内容,包含文本内容与标签内容
                console.log($(this).html());
                // text():不识别标签,只识别文本内容
                // 只能获取标签体中的文本内容,无法获取到标签名内容
                console.log($(this).text());
            });
            $("#btn").click(function(){
                // 在标签体中展示标题效果与文本内容
                $(".c1").html("<h1>你好</h1>");
            });
            $("#btn2").click(function(){
                // 将标签作为普通文本展示在页面中
                // 此时的h1是一个普通文本,页面中没有标签效果
                $(".c1").text("<h1>你好</h1>");
            });
        })
    </script>
</head>
<body>
<div class="c1">
    <h1>Hello World</h1>
</div>
<button id="btn">html赋值</button>
<button id="btn2">text赋值</button>
</body>
</html>